<template>
  <el-card>
    <div class="table">

      <!-- 表格 -->
      <el-table v-loading="loading" :data="commodityList" style="width: 100%">
        <el-table-column v-for="item in commodityTableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
          :width="item.width" :sortable="item.sortable" />
        <!-- 商品价格 -->
        <el-table-column prop="registeredCapital" label="商品价格" width="130">
          <template v-slot="scope">
            {{ scope.row.price.toFixed(2) }}
          </template>
        </el-table-column>
        <!-- 商品状态 -->
        <el-table-column :filters="[{ text: '上架', value: 1 }, { text: '失效', value: 0 }]" prop="status" label="商品状态"
          :filter-method="filterTag" width="100">
          <template v-slot="scope">
            <el-tag size="small" v-if="scope.row.status === 1" type="success">上架</el-tag>
            <el-tag size="small" v-else-if="scope.row.status === 0" type="danger">失效</el-tag>
          </template>
        </el-table-column>
        <!-- 商品类别 -->
        <el-table-column prop="category" label="商品类别" width="400">
          <template v-slot="scope">
            <el-tag v-if="currentCategoryList.length > scope.$index" type="info">
              {{ currentCategoryList[scope.$index].categoryName }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" width="150">
          <template v-slot="scope">
            <el-button type="primary" size="small"
              @click="() => { getCommodityDetail(scope.$index); dialogVisible = true }">详情
            </el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="config.total" class="pager mt-4"
        @current-change="changePage" :page-size="config.size" />
    </div>
  </el-card>

  <!-- 查看商品详情的模态框 -->
  <el-dialog v-model="dialogVisible" title="查看商品详情" width="50%">

    <!-- 商店详细信息展示表格 -->
    <el-descriptions :column="1" size="default" border>
      <el-descriptions-item min-width="130px" label="商品ID" label-align="center" align="center">
        {{ commodityDetail.commodity.commodityId }}
      </el-descriptions-item>
      <el-descriptions-item min-width="130px" label="商店ID" label-align="center" align="center">
        {{ commodityDetail.commodity.storeId }}
      </el-descriptions-item>
      <el-descriptions-item label="商品名称" label-align="center" align="center">
        {{ commodityDetail.commodity.commodityName }}
      </el-descriptions-item>
      <el-descriptions-item label="商品类型" label-align="center" align="center">
        <el-tag type="info" size="large">{{ currentCategoryList[detailIndex].categoryName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="价格" label-align="center" align="center">
        {{ commodityDetail.commodity.price.toFixed(2) }}
      </el-descriptions-item>
      <el-descriptions-item label="上架时间" label-align="center" align="center">
        {{ commodityDetail.commodity.launchDate }}
      </el-descriptions-item>
      <el-descriptions-item label="库存量" label-align="center" align="center">
        {{ commodityDetail.commodity.stocks }}
      </el-descriptions-item>
      <el-descriptions-item label="销量" label-align="center" align="center">
        {{ commodityDetail.commodity.salesVolume }}
      </el-descriptions-item>
      <el-descriptions-item label="商品状态" label-align="center" align="center">
        <el-tag size="large" v-if="commodityDetail.commodity.status === 1" type="success">上架</el-tag>
        <el-tag size="large" v-else-if="commodityDetail.commodity.status === 0" type="danger">失效</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="商品图片" label-align="center" align="center">
        <el-image v-for="item in commodityDetail.commodity.pictures.map(img_url_pre)" @dragstart.prevent
          style="width: 100px; height: 100px; margin-right: 10px; border-radius: 5px;" :src="item" :zoom-rate="1.2"
          :preview-src-list="commodityDetail.commodity.pictures.map(img_url_pre)" fit="cover" />
      </el-descriptions-item>
      <el-descriptions-item label="商品描述" label-align="center" align="center">
        {{ commodityDetail.commodity.description }}
      </el-descriptions-item>

    </el-descriptions>

    <!-- 底部的按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue'
import img_url_pre from '../../../utils/img_url_filter'

const { proxy } = getCurrentInstance();

let commodityList = ref([]);
// 和当前commodityList中的条目相对应
let currentCategoryList = ref([]);
// 当前查看详情的商品索引
let detailIndex = ref(0);

// 控制表格加载遮罩窗是否出现
let loading = ref(false);

const commodityTableLabel = reactive([
  {
    prop: "commodityId",
    label: "商品ID",
    width: 180,
    sortable: true,
  },
  {
    prop: 'storeId',
    label: '商店ID',
    width: 180,
    sortable: true,
  },
  {
    prop: "commodityName",
    label: "商品名称",
    width: 180
  },
  {
    prop: "launchDate",
    label: "上架时间",
    width: 180,
    sortable: true,
  },
  {
    prop: "stocks",
    label: "库存",
    sortable: true,
  },
  {
    prop: "salesVolume",
    label: "销量",
    sortable: true,
  },
]);

let config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})

const getCommodityList = async () => {
  // 发起请求
  let res = await proxy.$api.commodity.getCommodityList({
    current: config.current,
    size: config.size,
  });
  // 更新表格数据
  commodityList.value = res.data.commodityList;
  config.total = res.data.total;
  // 遍历并获取商品对应类别名
  currentCategoryList.value = [];
  for (let i = 0; i < commodityList.value.length; ++i) {
    let ret = await proxy.$api.category.getCategory(commodityList.value[i].categoryId);
    currentCategoryList.value.push(ret.data);
  }
}

const changePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  config.current = page
  await getCommodityList()
  loading.value = false;
}

let filterTag = (value, row) => {
  return row.status === value;
}

onMounted(async () => {
  // 开启加载遮罩
  loading.value = true;
  await getCommodityList();
  // 关闭加载遮罩
  loading.value = false;
});

// 控制模态框的显示和隐藏
const dialogVisible = ref(false)

let commodityDetail = reactive({
  commodity: {
    "commodityId": "",
    "userId": "",
    "commodityName": "",
    "category": [],
    "idCardNumber": "",
    "commodityProfile": "",
    "filingAddress": "",
    "registeredCapital": 0.00,
    "registrationDate": "",
    "pictures": [],
    "accountId": "",
    "status": 1
  }
});

// 这里直接用索引号找到commodityList中的信息即可
const getCommodityDetail = (index) => {
  detailIndex.value = index;
  commodityDetail.commodity = commodityList.value[index];
}

</script>

<style lang="less" scoped>
.table {
  position: relative;
  // height: 520px;

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>